<template>
  <el-row :gutter="20">
    <el-col :span="12">
      <el-card class="chart-card">
        <h3>商品类别占比</h3>
        <div ref="pieChartRef" style="height: 300px"></div>
      </el-card>
    </el-col>
    <el-col :span="12">
      <el-card class="chart-card">
        <h3>评分分布</h3>
        <div ref="barChartRef" style="height: 300px"></div>
      </el-card>
    </el-col>
  </el-row>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import * as echarts from 'echarts'

const pieChartRef = ref(null)
const barChartRef = ref(null)

onMounted(() => {
  // 初始化饼图
  const pieChart = echarts.init(pieChartRef.value)
  pieChart.setOption({
    tooltip: {
      trigger: 'item'
    },
    legend: {
      orient: 'vertical',
      right: 10,
      top: 'center'
    },
    series: [{
      type: 'pie',
      radius: ['40%', '70%'],
      data: [
        { value: 335, name: '上衣' },
        { value: 234, name: '裤装' },
        { value: 158, name: '裙装' },
        { value: 135, name: '外套' }
      ]
    }]
  })

  // 初始化柱状图
  const barChart = echarts.init(barChartRef.value)
  barChart.setOption({
    tooltip: {
      trigger: 'axis'
    },
    xAxis: {
      type: 'category',
      data: ['1星', '2星', '3星', '4星', '5星']
    },
    yAxis: {
      type: 'value'
    },
    series: [{
      type: 'bar',
      data: [12, 25, 75, 250, 420],
      itemStyle: {
        color: '#67C23A'
      }
    }]
  })
})
</script>

<style lang='scss' scoped>
.stat-card {
  text-align: center;
  
  .stat-title {
    color: #909399;
    font-size: 14px;
  }
  
  .stat-number {
    font-size: 24px;
    font-weight: bold;
    margin: 10px 0;
    color: #303133;
  }
  
  .stat-compare {
    font-size: 12px;
    color: #909399;
  }
}

.chart-card {
  margin-bottom: 20px;
  
  .chart-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    
    h3 {
      margin: 0;
    }
  }
}
</style>